<style lang="less">
    .modal-box img{
        width: 600px;
    }
</style>

<template>
    <Card>
        <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
                <BreadcrumbItem to="/product/list"><Icon type="ios-list"></Icon> 商品管理</BreadcrumbItem>
                <BreadcrumbItem to="/product/cate"><Icon type="ios-copy-outline"></Icon> 分类管理</BreadcrumbItem>
            </Breadcrumb>
        </p>
        <ButtonGroup v-if="this.tableSelects.length>0">
            <Poptip
                    confirm
                    title="确认全部隐藏吗？"
                    @on-ok="handeHide(1)"
            >
                <Button>全部隐藏</Button>
            </Poptip>
            <Poptip
                    confirm
                    title="确认全部显示吗？"
                    @on-ok="handeHide(0)"
            >
                <Button>全部显示</Button>
            </Poptip>
        </ButtonGroup>
        <Button type="primary" icon="android-add-circle" style="margin-bottom: 10px;" @click="showAdd()">添加分类</Button>
        <can-edit-table
                border
                v-model="list"
                @on-cell-change="handleCellChange"
                @on-change="handleChange"
                :editIncell="true"
                :columns-list="columns"
        ></can-edit-table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page
                        :total="total"
                        :current="current"
                        :page-size="pageSize"
                        :show-elevator="true"
                        :page-size-opts="[12, 20, 30, 40]"
                        :show-sizer="true"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                ></Page>
            </div>
        </div>
        <Modal v-model="modalAdd" width="400" @on-cancel="handleReset('formAdd')">
            <p slot="header" style="text-align:center">
                <span>新增分类</span>
            </p>
            <div style="text-align:left">
                <Form ref="formAdd" :model="formAdd" :rules="ruleAdd" :label-width="80">
                    <FormItem label="分类名称" prop="cate_title">
                        <Input type="text" v-model="formAdd.cate_title" placeholder="分类名称"></Input>
                    </FormItem>
                    <FormItem label="是否展示" prop="is_show">
                        <Select v-model="formAdd.is_show">
                            <Option v-for="item in isShowList" :value="item.value" :key="item.value">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleAddSubmit('formAdd')" icon="checkmark-round">提交</Button>
                        <Button type="ghost" @click="handleReset('formAdd')" style="margin-left: 8px">重新填写</Button>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer" style="text-align: center;"></div>
        </Modal>
    </Card>
</template>
<script>
    import Util from '../../libs/util';
    import moment from 'moment';
    import canEditTable from '../setting/components/canEditTable.vue';

    export default {
        components: {
            canEditTable
        },
        data () {
            return {
                columns: [
                    {
                        title: 'ID',
                        align: 'center',
                        width: 60,
                        key: 'cate_id'
                    },
                    {
                        title: '名称',
                        key: 'cate_title',
                        editable: true
                    },
                    {
                        title: '展示状态(1展示，0不展示)',
                        key: 'is_show',
                        editable: true
                    },
                    {
                        title: '排序(数值越大越靠前)',
                        key: 'sort',
                        editable: true
                    },
                    {
                        title: '添加时间',
                        key: 'create_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.create_time));
                        }
                    },
                    {
                        title: '修改时间',
                        key: 'update_time',
                        render: (h, params) => {
                            return h('div', this.formatDate(params.row.update_time));
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'handle',
                        handle: ['edit']
                    }
                ],
                list: [],
                total: 0,
                current: this.$route.params.page ? this.$route.params.page : 1,
                pageSize: 100,
                loading: true,
                searchForm: {
                    moble: '',
                    date_s: '',
                    date_e: '',
                    type: '',
                    user_id: ''
                },
                searchFormRules: {
                },
                hasSubmit: false,
                tableSelects: [],
                searchBrnLoading: false,
                modalAdd: false,
                formAdd: {
                    cate_title: '',
                    is_show: 1
                },
                ruleAdd: {
                    cate_title: { required: true, message: '必须输入名称', trigger: 'blur' }
                },
                isShowList: [{value: 1, 'name': '是'}, {value: 0, 'name': '否'}],
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                const $params = {page: this.current};
                this.getList($params);
            });
        },
        methods: {
            getList: function (params) {
                let p = {
                    ...params,
                    pageSize: 100
                }
                Util.ajax.post(`/adminapi/product/catelist`, p).then(response => {
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.current = response.data.data.current;
                    this.pageSize = response.data.data.pageSize;
                    this.loading = false;
                    this.hasSubmit = false;
                });
                this.searchBrnLoading = false;
            },
            selectRow (selection, row) {
                this.tableSelects = selection;
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            changePage (e) {
                this.loading = true;
                const params = {page: e, pageSize: this.pageSize};
                this.list = this.getList(params);
            },
            changePageSize (e) {
                this.loading = true;
                const params = {page: 1, pageSize: e};
                this.list = this.getList(params);
            },
            handleCellChange (val, index, key) {
                this.editConfig(val[index]);
            },
            handleChange (val, index) {
                this.editConfig(val[index]);
            },
            editConfig (val) {
                Util.ajax.post(`/adminapi/product/cateedit`, val).then(response => {
                    if(response.data.code == 0) {
                        const $params = {page: this.current};
                        this.getList($params);
                        this.$Message.success('修改成功');
                    }else {
                        this.$Message.error('修改失败');
                    }
                });
            },
            showAdd () {
                this.formAdd = {
                    cate_title: '',
                    is_show: 1
                };
                this.modalAdd = true;
            },
            handleAddSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        Util.ajax.post(`/adminapi/product/cateadd`, this.formAdd).then(response => {
                            if(response.data.code == 0) {
                                this.$Message.success('添加成功');
                                this.modalAdd = false;
                                this.getList();
                            }else {
                                this.$Message.error('添加失败');
                            }
                        });
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.hasSubmit = false;
                this.getList();
            },
            formatDate (datetime) {
                const date =  new Date(parseInt(datetime) * 1000);
                const y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let i = date.getMinutes();
                i = i < 10 ? ('0' + i) : i;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
            }
        }
    };
</script>
